<template>
  <div>
    <section v-if="clas">
      <section
        v-for="(item,index) in type.educationLIST"
        :key="index"
        class="teacher"
        @click="teacherClass1(item)"
      >
        <div class="teacher-avatar">
          <img :src="item.teacher_cover">
        </div>
        <div class="teacher-content">
          <div class="lesson-title">{{item.title}}</div>
          <div class="zaisheng">{{item.chtitle}}</div>
          <div class="class-other">
            <span>{{item.class_sum}}课 &nbsp;|&nbsp;</span>
            <span>￥{{item.money}}</span>
            <span>￥{{item.preferential_money}}</span>
          </div>
        </div>
      </section>
    </section>
    <div v-else>
          <section
      v-for="(item,index) in type.educationLIST"
      :key="index"
      class="teacher"
      @click="teacherClass(item)"
    >
      <div class="teacher-avatar">
        <img :src="item.img">
      </div>
      <div class="teacher-content">
        <div class="lesson-title">{{item.lesson.name}}</div>
        <div class="zaisheng">{{item.name}}</div>
        <div class="class-other">
          <span>{{item.lesson.class_sum}}课 &nbsp;|&nbsp;</span>
          <span>￥{{item.lesson.money}}</span>
          <span>￥{{item.lesson.preferential_money}}</span>
        </div>
        <div
          class="trydemo"
          @click.stop="trydemo(item)"
        >
          <img
            v-if="homeaudio !== item.audio.content"
            src="https://o6wndwjxn.qnssl.com/%E6%92%AD%E6%94%BE-2@2x.png"
          >
           <img
            v-if="homeaudio === item.audio.content && audiostate"
            src="https://o6wndwjxn.qnssl.com/%E6%92%AD%E6%94%BE-2@2x.png"
          >
          {{ homeaudio === item.audio.content && !audiostate ? '暂停':'试听'}}
        </div>
      </div>
    </section>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: ['type', 'clas'],
  computed: {
    ...mapState({
      homeaudio: state => state.audio.homeaudio,
      audioplayer: state => state.audioplayer
    })
  },
  methods: {
    teacherClass (item) {
      if (item) {
        if (window.__wxjs_is_wkwebview !== true) {
          this.$router.push({
            path: '/coursedetails',
            query: {
              curriculumId: item.lesson.curriculum_id ? item.lesson.curriculum_id : item.curriculum_id
            }
          })
        } else {
          window.location.href = `/coursedetails?curriculumId=${item.lesson.curriculum_id}`
        }
      }
    },
    teacherClass1 (item) {
      if (item) {
        console.log(item.curriculum_id)
        if (window.__wxjs_is_wkwebview !== true) {
          this.$router.push({
            path: '/coursedetails',
            query: {
              curriculumId: item.curriculum_id
            }
          })
        } else {
          window.location.href = `/coursedetails?curriculumId=${item.curriculum_id}`
        }
      }
    },
    trydemo (item) {
      // console.log(item.audio.content)
      this.$store.commit('homeaudio', item.audio.content)
      this.$store.commit('setselect', item.audio)
      this.$store.state.audio.audioplayer.toggle()
      this.audiostate = this.$store.state.audio.audioplayer.audio.paused
    }
  },
  data () {
    return {
      audiostate: this.$store.state.audio.audioplayer.audio.paused
    }
  }
}
</script>

<style lang="less" scoped>
.teacher {
  width: calc(100vw * 686 / 750);
  height: calc(200 / 750 * 100vw);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "PingFangSC-Medium";
  margin-bottom: 25px;
  .teacher-avatar {
    width: calc(158 / 750 * 100vw);
    height: calc(200 / 750 * 100vw);
    margin-right: calc(20 / 750 * 100vw);
    border-radius: 5px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .teacher-content {
    flex: 1;
    position: relative;
    .lesson-title {
      font-family: PingFangSC-Medium;
      font-size: 15px;
      color: #333333;
      text-align: left;
      font-weight: bold;
      color: #1a1a1a;
      text-overflow: ellipsis;
      display: -webkit-box;
      /* -webkit-box-orient: vertical; */
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .zaisheng {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #666666;
      margin-top: calc(100vw * 20 / 750);
      text-overflow: ellipsis;
      display: -webkit-box;
      /* -webkit-box-orient: vertical; */
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    .class-other {
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 11px;
      span:nth-of-type(1),
      span:nth-of-type(2) {
        font-family: PingFangSC-Regular;
        color: #999999;
        text-align: left;
      }
      span:nth-of-type(3) {
        font-family: PingFangSC-Semibold;
        color: #da4131;
        text-align: left;
      }
      span:nth-of-type(2) {
        text-decoration: line-through;
      }
    }
  }
}
.trydemo {
  width: 50px;
  line-height: 18px;
  height: 18px;
  font-family: PingFangSC-Regular;
  font-size: 10px;
  text-align: center;
  color: #da4131;
  border-radius: 12px;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #fef0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 6px;
    height: 8px;
    margin-right: 2px;
  }
}
</style>
